<template>
	<!-- 我的佣金 -->
	<div class="my-commission">
		<ClaendarInput v-model:date="date" />
		<ul class="my-commission-list">
			<nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
				<div class="list-item" v-for="(, index) in sum" :key="index">
					<div class="header" v-if="showHeader">
						<div class="left">
							<iconpark-icon class="level-icon" icon-id="copy1-g203620m" size="1.2rem"></iconpark-icon>
							<span class="user-name">用户名</span>
							<iconpark-icon class="edit-icon" icon-id="edit" size="1.2rem"></iconpark-icon>
						</div>
						<div class="right">他的下级：<span class="num">5</span></div>
					</div>

					<div class="content">
						<p class="label">注册日期：<span class="value">2024-06-11</span></p>
						<p class="label">类型：<span class="value">电子</span></p>
						<p class="label">有效投注：<span class="value">99.00</span></p>
						<p class="label">输赢：<span :class="['value', true ? 'red' : 'green']">-99.99</span></p>
						<p class="label">佣金：<span class="value">99.00</span></p>
					</div>
				</div>
			</nut-infinite-loading>
		</ul>

		<div class="count-box">
			<p class="label w-70">累计有效投注：<span class="value">999</span></p>
			<p class="label">有效投注：<span class="value">999</span></p>
			<p class="label w-70">累计输赢：<span class="value">999</span></p>
			<p class="label">输赢：<span class="value">999</span></p>
			<p class="label  w-70 m-0">累计佣金：<span class="value">999</span></p>
			<p class="label m-0">输赢：<span class="value">999</span></p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';

import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";

import ClaendarInput from '@/components/ClaendarInput.vue'; // 引入 ClaendarInput 组件

const cycle = ref(0);
const infinityValue = ref(false);
const hasMore = ref(true);
const sum = ref(12);
const showHeader = ref(false);
// 日期
const date = ref<[Date, Date]>([new Date(), new Date()]);
const startTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})

const endTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})

const formatDate = (date: Date, isEndTime = false) => ({
  year: date.getFullYear(),
  month: date.getMonth() + 1, // 月份从 0 开始，需要加 1
  day: date.getDate(),
  hour: isEndTime ? 23 : 0,
  minute: isEndTime ? 59 : 0,
  second: isEndTime ? 59 : 0,
});

const handleTimeGroupClick = async () => {
  const [start, end] = date.value;
  Object.assign(startTime, formatDate(start));
  Object.assign(endTime, formatDate(end, true));
};

const loadMore = () => {
	setTimeout(() => {
		sum.value = sum.value + 12;
		cycle.value++;
		if (cycle.value > 4) hasMore.value = false;
		infinityValue.value = false;
	}, 1000);
};

interface List {
	role_id: number;
	level: number;
	team_num: number;
	personal_bet: number;
	team_bet: number;
	personal_return: number;
	team_return: number;
	username: string;
}

const result = reactive<{
	total_page: number;
	list: List[];
}>({
	total_page: 0,
	list: [],
});
const params: any = reactive({
	// 搜索参数
	page: 1,
	search_name: '',
	search_lev: '-1',
});

// 查询
const queryData = () => {
	// @ts-ignore
	const req:any = NetPacket.req_my_return();
	req.page = params.page
	Object.assign(req.start_time, startTime) // 开始时间
  Object.assign(req.end_time, endTime) // 结束时间
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_my_return',
    callback: queryDataHandle
  })
	
};

const queryDataHandle = (data: any) => {
  console.log('我的佣金', data)
  result.total_page = 0;
	result.list = [];
}

// 搜索
const search = () => {
	params.page = 1;
	handleTimeGroupClick()
	queryData();
};


watch(
	() => date.value,
	(newDate) => {
		console.log('newDate', newDate);
		if(newDate.length === 2) {
			search();
		}
	},
	{ immediate: true }
);

onMounted(() => {
	// search();
});

</script>

<style lang="scss" scoped>
.input-box {
	border-radius: 8px;
	background: #1d1c3c;
	box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
	padding: 0 14px;
	.txt {
		color: #c6c4f5;
		font-size: 14px;
		font-weight: 400;
		line-height: 14px;
		margin-left: 8px;
	}
}
.my-commission {
	height: 100%;
	position: relative;
	padding: 0 10px 10px;
	box-sizing: border-box;
	.my-commission-list {
		position: absolute;
		top: 54px;
		bottom: 80px;
		overflow-y: scroll;
		overflow-x: hidden;

		.list-item {
			border-radius: 12px;
			background: #131232;
			margin-bottom: 8px;
			.header,
			.content {
				height: 36px;
				padding: 0 14px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 0.5px solid #242352;
				flex-wrap: wrap;
				.left {
					display: flex;
					align-items: center;
					width: 50%;
					.level-icon {
						color: #fff;
						margin-right: 4px;
					}
					.user-name {
						margin-right: 4px;
						font-weight: 500;
						color: #fff;
						font-size: 14px;
					}
				}

				.right {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex: 1;
					color: #c6c4f5;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					.num {
						color: #5b6cff;
						font-family: 'PingFang SC';
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: none;
						text-decoration-thickness: auto;
						text-underline-offset: auto;
						text-underline-position: from-font;
					}
				}
			}

			.content {
				height: auto;
				padding: 14px 14px 6px 14px;
				.label {
					color: #c6c4f5;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					display: flex;
					align-items: center;
					width: 50%;
					margin-bottom: 8px;
					.value {
						color: #fff;
					}
					.red {
						color: #ff4a5e;
					}
					.green {
						color: #3fcb6e;
					}

					.num {
						color: #5b6cff;
						font-family: 'PingFang SC';
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-skip-ink: none;
						text-decoration-thickness: auto;
						text-underline-offset: auto;
						text-underline-position: from-font;
					}
				}
			}
		}
	}

	.count-box {
		background: #100e26;
		box-shadow: 0px 1px 0px 0px #282747 inset;
		height: 80px;
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 8px 8px 6px 8px;
		align-items: center;
		gap: 0;
		.label {
			color: #c6c4f5;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			display: flex;
			align-items: center;
			width: 30%;
			&.m-0 {
				margin: 0;
			}
			&.w-70 {
				width: 70%;
			}
			.value {
				color: #fff;
			}
		}
	}
}
</style>
